<template>
  <view class="mine">
    <!-- 标题栏 -->
    <cl-topbar
      title="个人中心"
      background-color="#f7f7f7"
      :show-back="false"
    ></cl-topbar>
    <!-- 头像信息栏 -->
    <view class="avator-and-user-info">
      <!-- 左侧的头像和昵称 -->
      <view class="left-info" @click="open">
        <u-avatar font-size="54rpx" :src="userInfo.avator"></u-avatar>
        <span class="oneLineOmission">{{
          userInfo.nickName || "匿名用户"
        }}</span>
        <image
          class="change-icon"
          src="/static/images/pages/mine/PencilSimpleLine@2x.webp"
          mode=""
        ></image>
      </view>
      <!-- 右侧会员码 -->
      <view class="right-scan-vip">
        <image
          src="/static/images/pages/mine/会员二维码@2x.webp"
          mode=""
        ></image>
      </view>
    </view>
    <!-- 等级情况 -->
    <view class="vip-level-container">
      <image src="/static/images/pages/mine/vip.png" mode=""></image>
      <!-- 等级 -->
      <span class="vipLevel"> Lv1 </span>
      <!-- 卡号 -->
      <span class="vipId"> 卡号:&nbsp;20221211091306181 </span>
      <!-- 进度条 -->
      <view class="progress">
        <!-- 左侧进度条 -->
        <view class="left-jindu">
          <cl-progress
            :value="40"
            :show-text="false"
            :color="['#ffb875', '#feba7d']"
          ></cl-progress>
        </view>
        <!-- 右侧字体样式 -->
        <view class="right-text">
          <em class="present">800</em><em class="big">/</em
          ><em class="target">1000</em>
        </view>
      </view>
    </view>
    <!-- 点餐栏 -->
    <MenuList class="menu" :menuList="menuList"></MenuList>
    <!-- 邀请好友 -->
    <view class="info">
      <image
        style="width: 100%; height: 100%"
        src="../../static/images/pages/home/image.png@2x.webp"
        mode=""
      >
      </image>
      <!-- <Swiper :swiperHeight="180"></Swiper> -->
    </view>
    <!-- 用户服务 -->
    <view class="user-server">
      <span class="title">用户服务</span>
      <MenuList
        class="user-menu"
        :menuList="userServerMenuList"
        :colums="3"
      ></MenuList>
    </view>
    <!-- 用户信息修改 -->
    <u-popup :show="showEdit" mode="center" @close="close" @open="open">
      <view class="editBox">
        <button @chooseavatar="onChooseavatar" open-type="chooseAvatar">
          <u-avatar font-size="54rpx" :src="userInfo.avator"></u-avatar>
        </button>
        <u--form labelPosition="left" :model="userInfo" ref="uForm">
          <u-form-item label="名称" borderBottom>
            <u--input
              type="nickname"
              @blur="blur"
              v-model="userInfo.nickName"
              border="none"
              placeholder="请输入内容"
            ></u--input>
          </u-form-item>
        </u--form>
        <u-button type="primary" @click="updateInfo" text="确定"></u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getWxInfo, wxInfoUpdate, showToast } from "@/common/api.js";
import MenuList from "@/components/MenuList/index.vue";
export default {
  name: "mine",
  components: {
    MenuList,
  },
  computed: {
    avator() {
      console.log(this.userInfo, 99999);
      return;
    },
  },
  data() {
    return {
      showEdit: false,
      userInfo: {
        avator: "",
        nickName: "",
      },

      menuList: [
        {
          imgSrc: "/static/images/pages/mine/会员码@2x.webp",
          text: "会员码",
        },
        {
          imgSrc: "/static/images/pages/mine/兑换中心@2x.webp",
          text: "兑换中心",
        },
        {
          imgSrc: "/static/images/pages/mine/领券中心@2x.webp",
          text: "领券中心",
        },
        {
          imgSrc: "/static/images/pages/mine/充值中心@2x.webp",
          text: "充值中心",
        },
        {
          imgSrc: "/static/images/pages/mine/加盟合作@2x.webp",
          text: "加盟合作",
        },
        {
          imgSrc: "/static/images/pages/mine/兑换中心@2x.webp",
          text: "兑换中心",
        },
        {
          imgSrc: "/static/images/pages/mine/评论@2x.webp",
          text: "评论",
        },
      ], //点餐栏信息
      userServerMenuList: [
        {
          imgSrc: "/static/images/pages/mine/账单明细@2x.webp",
          text: "账单明细",
        },
        {
          imgSrc: "/static/images/pages/mine/用户设置@2x.webp",
          text: "用户设置",
        },
        {
          imgSrc: "/static/images/pages/mine/意见反馈@2x.webp",
          text: "意见反馈",
        },
      ], //用户服务信息
    };
  },
  created() {
    console.log("我的");
    this.socketClosea();
  },
  mounted() {
    if (!uni.getStorageSync("userInfo")) {
      this.getWxInfoFn();
    }
  },
  methods: {
    onChooseavatar(e) {
      this.userInfo.avator = e.detail.avatarUrl;
    },
    blur(e) {
      this.userInfo.nickName = e;
    },
    async updateInfo() {
      let params = {
        wxUserInfo: this.userInfo, // 微信用户信息
      };
      let res = await wxInfoUpdate(params);
      if (res.code == 200) {
        showToast("更新成功");
        this.showEdit = false;
      }
    },
    open() {
      this.showEdit = true;
    },
    close() {
      this.showEdit = false;
    },

    async getWxInfoFn() {
      let that = this;
      let res = await getWxInfo();
      if (res.code == 200) {
        that.userInfo = res.data.wxUserInfo;
      }
      // this.$forceupdate;
    },
    socketClosea() {
      uni.removeStorageSync("roomid");
    },
  },
};
</script>

<style lang="scss" scoped>
.mine {
  font-family: "mine";
  width: 100%;
  min-height: 100%;
  background-color: $pages-background-color;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .editBox {
    width: 600rpx;
    height: 320rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  // 头像信息栏
  .avator-and-user-info {
    width: 100%;
    height: 108rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-info {
      width: calc(100% - 180rpx);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 60rpx;

      .avator {
        width: 108rpx;
        height: 108rpx;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0px 1rpx 2rpx 0px rgba(0, 0, 0, 0.25);
      }

      span {
        max-width: calc(100% - 160rpx);
        font-size: 28rpx;
        font-weight: 600;
        color: $main-text;
        margin-left: 4rpx;
      }

      .change-icon {
        width: 32rpx;
        height: 28rpx;
      }
    }

    .right-scan-vip {
      width: 180rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      image {
        width: 68rpx;
        height: 68rpx;
      }
    }
  }

  //会员等级
  .vip-level-container {
    position: relative;
    margin-top: 10rpx;
    width: 700rpx;
    height: 360rpx;
    border-radius: 30rpx;
    background-size: 100% 100%;
    font-family: "mine";
    overflow: hidden;
    box-shadow: 0rpx 0rpx 8rpx 0px #2f2845;

    //背景图片
    image {
      width: 100%;
      height: 100%;
    }

    //等级
    .vipLevel {
      position: absolute;
      top: 18rpx;
      left: 48rpx;
      font-size: 120rpx;
      font-weight: 400;
      color: transparent;
      background: linear-gradient(
        113.3deg,
        rgba(196, 152, 144, 1) 0%,
        rgba(249, 236, 204, 1) 99.86%
      );
      -webkit-background-clip: text;
    }

    //卡号
    .vipId {
      position: absolute;
      top: 220rpx;
      right: 18rpx;
      font-size: 24rpx;
      font-weight: 400;
      letter-spacing: 1rpx;
      color: #ffeac6;
    }

    //进度条
    .progress {
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      width: 100%;
      height: 88rpx;

      .left-jindu {
        flex: 1;
        padding-left: 35rpx;
      }

      .right-text {
        min-width: 20%;
        max-width: 35%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 28rpx;
        color: #faefec;
        padding-right: 16rpx;

        .present {
          padding-bottom: 16rpx;
          padding-left: 10rpx;
        }

        .big {
          font-size: 64rpx;
          margin-right: 8rpx;
          color: #febf89;
        }

        .target {
          padding-top: 16rpx;
          font-size: 34rpx;
          color: #feb274;
        }
      }
    }
  }

  //点餐栏
  .menu {
    margin-top: 16rpx;
  }

  // 邀请好友
  .info {
    margin: 0 auto;
    margin-top: 20rpx;
    width: 700rpx;
    height: 200rpx;
    border-radius: 12rpx;
    background: linear-gradient(210.58deg, #ffffff 0%, #26bcd4 100%);
    overflow: hidden;
  }

  //用户服务
  .user-server {
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    width: 700rpx;
    height: 224rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      width: 100%;
      text-align: left;
      font-size: 32rpx;
      font-weight: 400;
      color: $main-text;
      padding-bottom: 10rpx;
    }
  }
}
</style>